import { Fragment, defineComponent, reactive } from 'vue';
import { floorContainer, up, down, scroll_box, active } from './FloorControl.module.scss';
import { map } from '@/store';
import { animate } from 'popmotion';

/*
---文件
*/
export const floorObj = reactive({
    isShow: true,
})

export default defineComponent({
    name: 'FloorControl',
    data() {
        return {
        };
    },
    props: {
        length: {
            type: Number,
            default: 3,
        },
    },
    methods: {
        scrollTo(index: number | 'less' | 'add', duration = 100) {
            const scrollEle = document.querySelector(`.${scroll_box}`);
            if (!scrollEle) return;
            let top = scrollEle.scrollTop;
            if (typeof index === 'number') {
                top = (index - Math.round(this.length / 2) + 1) * 35;
            } else if (index === 'less') {
                top += this.length * 35;
            } else {
                top -= this.length * 35;
            }
            animate({
                from: scrollEle.scrollTop,
                to: top,
                onUpdate(p) {
                    scrollEle.scrollTo({
                        top: p,
                    });
                },
                duration,
            });
        },
        changeFloor(level: number) {
            console.log(level);

            if (map.activeFloor !== level) {
                map.fmap.setLevel({
                    level: level,
                });
                this.scrollTo(level - 1);
            }
        }
    },
    render() {
        const { length } = this;
        console.log();

        return <Fragment>
            <div class={floorContainer} v-if={floorObj.isShow}>
                {map.floorInfos.length > length ? <div class={`flex-center ${up}`} onClick={() => this.scrollTo('add')} /> : null}
                <ul class={scroll_box} style={{ maxHeight: `${length * 35}px` }}>
                    {
                        map.floorInfos.length > 1 ? map.floorInfos.map((floor: any, index: number) => {
                            return <li key={index} class="flex-center" onClick={() => this.changeFloor(floor.level)}>
                                <span class={floor.level === map.activeFloor ? active : undefined}>{floor.name}</span>
                            </li>;
                        }) : null
                    }
                </ul>
                {map.floorInfos.length > length ? <div class={`flex-center ${down}`} onClick={() => this.scrollTo('less')} /> : null}
            </div>
        </Fragment>;
    },
});